<template>
  <div class="div_box">
    <el-dialog
      title="实时监控"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="1200px"
      top="8vh"
      :close-on-click-modal="false"
      @close="cancelAddDia"
      :modal="false"
    >
      <div
        style="height: 200px; background: black; position: relative; width: 33%"
      >
        <div id="265Player" v-if="codec === 1 || codec === 2"></div>
        <!-- <div v-if="codec === 4" style="width: 100%; height: 100%">
                            <canvas id="canvas" />
                        </div> -->
        <!-- <div class="loading" v-show="isLoading">
                            <img src="./loading.gif" class="gif" />
                        </div> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["videoArr"],
  components: {},
  data() {
    return {
      dialogVisible: false,
      isPause: true,
      isLoading: false,
      player: null,
      url: "",
      server_ip: "",
      timer: "",
      codec: 1,
      play_token: "",
      token: "",
    };
  },
  computed: {},
  watch: {
    isPause: {
      handler: function (val, oldval) {
        if (val) {
          this.stop();
        } else {
          this.play();
        }
      },
    },
  },
  methods: {
    // 点击取消和关闭按钮
    cancelAddDia() {
      this.dialogVisible = false;
    },
    init(deviceId) {
        console.log(this.deviceId,"videoArr");
      var t = new Api();
      // console.log(t);
      // 登录
      // t.login('18194005618', 'Yl86503860@').then(res => {
      // t.login('787814981@qq.com', 'qwe123').then(res => {
      t.login("yuanliu@hongshi.com", "yuanliuhongshi")
        .then((res) => {
          console.log(res);
          if (res.result == 0) {
            this.token = res.token;
            // 获取设备列表
            t.getDeviceList(res.token)
              .then((res) => {
                console.log(res);
                if (res.result == 0) {
                  this.server_ip = res.server_ip;

                  // 43176050 39623600 14998052 35890596 39508455
                  // 获取播放地址并初始化api播放
                  t.requestPlayAddress(this.token, deviceId, this.server_ip)
                    .then((res) => {
                      console.log(res, "res");
                      if (res.code === 1000) {
                        this.codec = res.codec;
                        this.play_token = res.play_token;

                        // // width,height 移动端h5根据res.width, res.height比例进行适配,codec为4时，传入的width,height就是canvas的宽高
                        // let pageWidth = this.$refs.page.clientWidth;
                        // let pageHeight = this.$refs.page.clientHeight;
                        // console.log(pageWidth, pageHeight);
                        let width = res.width;
                        let height = res.height;
                        this.player = t.init(
                          this.codec,
                          this.server_ip,
                          this.play_token,
                          width,
                          height
                        );
                        if (!this.player) {
                          //   alert("您的浏览器不支持WebAssembly，不支持播放");
                        } else {
                          //   alert("api播放初始化完成");
                          // this.play()
                          this.isPause = false;
                        }
                        console.log(this.player);
                      } else {
                        this.$modal.notifyWarning(res.err);
                      }
                    })
                    .catch((err) => {
                      console.log(err);
                    });
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    play() {
      // this.player.play();
      this.player.play("265Player", false);
      // this.stopPromiseshow = false;
      // 加载动画显示判断
      // this.isLoading = true;
      // clearInterval(this.timer);
      this.timer = "";
      // this.timer = setInterval(() => {
      // let isLoading = this.player.showLoading();
      // if (!isLoading) {
      //     clearInterval(this.timer);
      //     this.timer = "";
      //     this.isLoading = false;
      //     console.log("end");
      // }
      // }, 100);
    },
    stop() {
      this.player.stop();
      // this.stopPromiseshow = true;
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.div_box {
  // height: 79vh;
  // height: calc(100vh - 122px);
  overflow: auto;
  width: 100%;
  display: flex;
  justify-content: center;

  .div_left {
    width: 75%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .webplayer_menu {
      background: #0f2c82;

      width: 800px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 55px;
      padding: 0 16px;
      box-sizing: border-box;
      position: relative;

      i {
        font-size: 30px;
        cursor: pointer;
      }

      .webplayer-menu--left {
        width: 50%;

        i {
          color: #f1f1f1;
        }
      }

      .webplayer-menu--right {
        width: 50%;
        // padding-left: 10.5%;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        i {
          margin-left: 28px;
          color: #f1f1f1;
        }
      }
    }

    .huifang {
      display: flex;
      background-color: #e8e8e8;
      border-radius: 20px;
      // margin: 3% auto;
      margin-top: 2%;
      margin-bottom: 2%;

      > div {
        width: 65px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        color: #000000;
        cursor: pointer;

        &:hover {
          color: #409eff;
        }
      }
    }

    .slot_tips_h5player {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin: auto;
      background: rgba(0, 0, 0, 0.5);
      font-size: 14px;
      display: flex;
      color: rgba(255, 255, 255, 0.8) !important;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      i {
        font-size: 60px;
      }

      span {
        margin: 7px;
        font-size: 16px;
      }
    }
  }

  .div_right {
    position: absolute;
    right: -30%;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #5d596c;
    top: 30%;
  }

  .div_zoom {
    position: absolute;
    right: -30%;
    width: 30%;
    top: 55%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f1f1f1;

    > div:nth-of-type(2) {
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #f1f1f1;
    }

    > div:first-of-type {
      width: 26px;
      height: 26px;
      background: #506cb9;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      cursor: pointer;
    }

    > div:last-of-type {
      width: 26px;
      height: 26px;
      background: #506cb9;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      cursor: pointer;
    }
  }

  .div_focal {
    position: absolute;
    right: -30%;
    width: 30%;
    top: 65%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f1f1f1;

    > div:nth-of-type(2) {
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #f1f1f1;
    }

    > div:first-of-type {
      width: 26px;
      height: 26px;
      background: #506cb9;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      cursor: pointer;
    }

    > div:last-of-type {
      width: 26px;
      height: 26px;
      background: #506cb9;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      cursor: pointer;
    }
  }
}

::v-deep .video-player {
  // width: 100vw !important;
  width: 100% !important;
}

.video-ctrl-box {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #93b1ff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  .ctrl-circle {
    position: absolute;
    width: 70px;
    height: 70px;
    background: #506ab8;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f1f1f1;
  }

  i {
    cursor: pointer;
    position: absolute;
    color: #072069;

    &:active {
      color: #409eff;
    }
  }

  .el-icon-caret-left {
    top: 47%;
    left: 27px;
    transform: translateX(-50%) scale(1.5);
  }

  .el-icon-caret-right {
    top: 48%;
    right: 11px;
    transform: translateX(-50%) scale(1.5);
  }

  .el-icon-caret-top {
    left: 50%;
    transform: translateX(-50%) translateY(17px) scale(1.5);
  }

  .el-icon-caret-bottom {
    left: 50%;
    bottom: 35px;
    transform: translateX(-50%) translateY(16px) scale(1.5);
  }
}

::v-deep .el-dialog__header {
  display: block !important;
  background: #354895;
  border-bottom: 1px solid #06b1e7;

  .el-dialog__title {
    color: #f1f1f1;
  }
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #f1f1f1;
  font-size: 20px;
}

::v-deep .el-dialog__body {
  background: #384e91 !important;
  min-height: 552px;
  overflow-y: auto;
  padding: 20px !important;
  color: #f1f1f1;
}

::v-deep .el-dialog {
  border: 2px solid #06b1e7;
  box-shadow: 0px 0px 10px #06b1e7;
}
</style>
